/***
You can use SleekMobile's showMessage() method to display a message
at the top of the screen.

When you switch pages you see it in action as it displays "Loading..." with a spinner.

`SleekMobile.showMessage(message, className, hideDelay)`

* `message` is the message you want to display
* `className` (optional) is a potential CSS class you might want to add ('loading', 'success', 'warning', 'error' and 'info' are currently styled)
* `hideDelay` (optional) specifies how many ms to show the message for

Use `SleekMobile.hideMessage()` to hide messages (if you set `hideDelay` to false).
***/
#sleek-mobile-message {
	background: rgba(0, 0, 0, .8) url() no-repeat 10px 50%;

	position: fixed;
	left: 50%;
	top: -500px;
	z-index: 99;

	margin: 0 0 0 -100px;
	padding: 5px 10px;

	width: 180px;

	color: #fefefe;

	@include border-bottom-left-radius($border-radius);
	@include border-bottom-right-radius($border-radius);

	@include transition(top $transition-duration ease-in-out);
}

#sleek-mobile-message.visible {
	top: 0;
}

#sleek-mobile-message.loading {
	background-image: url(http://exscale.se/__files/uploads/ajax-loader.gif);
	padding-left: 40px;
	width: 150px;
}

#sleek-mobile-message.error {
	background-image: url(http://www.printanddigital.co.uk/images/error-icon.png);
	padding-left: 40px;
	width: 150px;
}
